<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta content="telephone=no" name="format-detection" />
    <title>Document</title>

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/laydate.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/product.css">

    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/html5.js"></script>
    <script src="js/placeholder.js"></script>
    <!--[if IE]>
<script>
    (function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,main,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
</script>
<![endif]-->
    <!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/html5.css">
<![endif]-->
    <!--[if lt IE 9]>
    <script src="js/css3-mediaqueries.js"></script>
<![endif]-->
    <script>
        var browser = navigator.appName
        var b_version = navigator.appVersion
        var version = b_version.split(";");
        var trim_Version = version[1].replace(/[ ]/g, "");
        if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE6.0") { alert("Your browser version is too low, and some features may not be displayed! Please upgrade your browser or use another browser!"); }
        else if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE7.0") { alert("Your browser version is too low, and some features may not be displayed! Please upgrade your browser or use another browser!"); }
    </script>
</head>

<body>
    <div class="content-box">
        <div class="content-top">
            <div class="fl">
                <a href=""><img src="./images/logo.PNG" /></a>
            </div>
            <img class="menu-btn" src="./images/menu-logo.PNG" />
            <div class="fr">
                <img class="top-home" src="./images/top-home.PNG" />
                <div class="top-news">
                    <img src="./images/top-news.PNG" />
                    <span></span>
                </div>
                <div class="top-account">
                    <img src="./images/top-account.PNG" />
                    <span class="name">UserName</span>
                    <img src="./images/icon_dropdown.png" />
                    <ul>
                        <li><a>修改密码</a></li>
                        <li><a>角色管理</a></li>
                        <li><a>管理员管理</a></li>
                    </ul>
                </div>
                <img class="top-btn" src="./images/top-btn.PNG" />
            </div>
        </div>
        <div class="content-menu">
            <ul class="menu-list">
                <li class="item1 active">
                    <a>首页</a>
                </li>
                <li class="item2">
                    <a>订单</a>
                    <ul class="menu2">
                        <li class="active"><a>menu2</a></li>
                        <li><a>menu2</a></li>
                        <li><a>menu2</a></li>
                    </ul>
                </li>
                <li class="item3">
                    <a>产品</a>
                </li>
                <li class="item4">
                    <a>会员</a>
                </li>
                <li class="item5">
                    <a>促销</a>
                </li>
                <li class="item6">
                    <a>数据</a>
                </li>
                <li class="item7">
                    <a>博客</a>
                </li>
                <li class="item8">
                    <a>店铺</a>
                </li>
                <li class="item9">
                    <a>设置</a>
                </li>
            </ul>
        </div>
        <div class="content-right">
            <div class="order-box">
                <p class="title1">订单管理</p>
                <div class="table-box">
                    <div class="fl mt20">
                        <button class="btn btn-add">添加</button>
                        <button class="btn btn-sort">排序</button>
                        <button class="btn btn-set">批量设置</button>
                        <button class="btn btn-modify">批量修改</button>
                        <button class="btn btn-delete">批量删除</button>
                        <div class="clear"></div>
                    </div>
                    <div class="fr mt20">
                        <div class="vcb">
                            <sapn class="vcb">分类</sapn>
                            <select class="vcb diqu">
                                <option>全部</option>
                                <option>China</option>
                                <option>其他</option>
                            </select>
                        </div>
                        <div class="vcb">
                            <sapn class="vcb">上架状态</sapn>
                            <select class="vcb yewu">
                                <option>全部</option>
                                <option>a</option>
                                <option>b</option>
                            </select>
                        </div>
                        <input class="vcb search" type="text" placeholder="产品名称/型号" />
                        <button class="vcb btn-blue">搜索</button>
                        <div class="clear"></div>
                    </div>
                    <div class="clear"></div>
                    <table class="table" border="0" cellpadding="0" cellspacing="0">
                        <thead>
                            <tr>
                                <th width="6%">
                                    <div class="checkbox">
                                        <input type="checkbox" />
                                        <span></span>
                                    </div>
                                </th>
                                <th width="7%">排序</th>
                                <th width="12%">图片</th>
                                <th width="29%">产品名称</th>
                                <th width="6%">编号</th>
                                <th width="8%">价格</th>
                                <th width="7%">库存</th>
                                <th width="8%">更新时间</th>
                                <th width="7%">上架状态</th>
                                <th width="12%">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <div class="checkbox">
                                        <input type="checkbox" />
                                        <span></span>
                                    </div>
                                </td>
                                <td><input type="text" class="sort_input"></td>
                                <td>
                                    <img class="vcb pro_img" src="./img/computer.png" />
                                </td>
                                <td>
                                    <p>Torch 9800 Unlocked Phone with 5 MP Camera, Full QWERTY 
                                        Keyboard and 4 GB Internal Storage - Unlocked Phone - No 
                                        Warranty - Black
                                    </p>
                                </td>
                                <td>001</td>
                                <td>$999999.00</td>
                                <td>100000</td>
                                <td>
                                    2019-12-05
                                </td>
                                <td>
                                    <span class="shelves_status"></span>
                                </td>
                                <td>
                                    <p class="option-btn">
                                        <a href="javascript:;">编辑</a>
                                        <a href="javascript:;">复制</a>
                                        <a href="javascript:;">分享</a>
                                        <a href="javascript:;" class="del_pro">删除</a>
                                    </p>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="pages-btn">
                        <span class="total">108条记录,</span><span>共11页</span>
                        <a>&lt;</a>
                        <a class="active">1</a>
                        <a>2</a>
                        <a>3</a>
                        <a>&gt;</a>
                        <span>跳转</span>
                        <input type="number" />
                        <span>页</span>
                    </div>
                </div>
            </div>
            <!-- 导出订单弹窗 start -->
            <div class="dialog daochu-dialog">
                <div class="content">
                    <p class="title">导出订单</p>
                    <span class="close"></span>
                    <select class="time">
                        <option>下单时间</option>
                        <option>昨天</option>
                        <option>今天</option>
                    </select>
                    <input class="range-time" type="text" placeholder="开始日期-结束日期" />
                    <div class="clear"></div>
                    <p class="title2">订单状态</p>
                    <select class="status">
                        <option>状态</option>
                        <option>状态</option>
                        <option>状态</option>
                    </select>
                    <div class="btn-tab">
                        <button class="btn-blue ok">导出</button>
                        <button class="btn cancle">返回</button>
                    </div>
                </div>
            </div>
            <!-- 导出订单弹窗 end -->

            <!-- 删除弹窗 start -->
            <div class="dialog delete-dialog">
                <div class="content">
                    <span class="close"></span>
                    <p><img src="./images/icon_care.png" /></p>
                    <p>删除后不可恢复，继续吗？</p>
                    <div class="btn-tab">
                        <button class="btn ok">确定</button>
                        <button class="btn-blue cancle">取消</button>
                    </div>
                </div>
            </div>
            <!-- 删除弹窗 end -->

            <!-- 删除提示 start -->
            <div class="dialog delete-toast">
                <div class="content">
                    <p><img src="./images/icon_care.png" /></p>
                    <p>请选择所删除的项目</p>
                </div>
            </div>
            <!-- 删除提示 end -->
        </div>
    </div>
    <script src="js/echarts.min.js"></script>
    <script src="js/laydate.js"></script>
    <script src="js/common.js"></script>

    <script>

        $(".btn-delete").click(function () {
            if ($(this).parents(".table-box").find("table").find("tbody").find(".checkbox.checked").length > 0) {
                $(".delete-dialog").addClass("show");
            } else {
                showDeleteNoSelectedMsg();
            }

        })

        $(".delete-dialog .ok").click(function () {
            $(".delete-dialog").removeClass("show");
        })

        function showDeleteNoSelectedMsg() {
            $(".delete-toast").addClass("show");
            setTimeout(function () {
                $(".delete-toast").removeClass("show");
            }, 1200)
        }
        $(".option-btn .del_pro").on("click",function(){
            $(".delete-dialog").addClass("show");
            var _this=$(this).parents("tr");
            $(".dialog .btn-tab button.ok").on("click",function(){
                _this.remove();
            })
        })

    </script>
</body>

</html>